<template>
	<div class='app-container'>
		<!--<div style="margin-bottom: 12px;">
			<el-button @click="handleCreate" type="success">新词发现设置</el-button>
			<el-button @click="handleDeleteList" type="danger">加入黑名单</el-button>
		</div>-->
		<el-row :gutter="20" style="margin-bottom: 12px;">
			<el-col :span="8">
		        <el-input v-model.trim="listQuery.wordName" type="text" placeholder="请输入搜索内容" @keyup.enter.native="getList" clearable>
		          	<el-button slot="append" icon="el-icon-search" @click='getList'></el-button>
		        </el-input>
	        </el-col>
			<el-col :span="16">
				<el-button @click="handleCreate" type="success">新词发现设置</el-button>
				<el-button @click="handleDeleteList" type="danger">加入黑名单</el-button>
			</el-col>
		</el-row>
		<el-table :data="tableData" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row @selection-change="handleSelectionChange" style="width: 100%">
			<el-table-column align="center" type="selection" width="55"></el-table-column>
			<el-table-column prop="wordName" label="词汇名称" align="center"></el-table-column>
			<el-table-column prop="wordNum" label="词汇频度" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button size="mini" @click="changeStatus(scope.row, 1)">加入词汇库</el-button>
					<el-button size="mini" type="danger" @click="changeStatus(scope.row, 2)">加入黑名单</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-container">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[10,20,30,50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
		<el-dialog title="新词发现设置" :visible.sync="dialogFormVisible" :closeOnClickModal='false'>
			<el-form :rules="tempRules" ref="temp" :model="temp" label-position="left" label-width="120px" style='margin: 24px;'>
				<el-form-item label="计算时间周期" prop="timeCycle">
					<el-select v-model="temp.timeCycle" type="text" placeholder="请选择">
						<el-option v-for="item in timeCycles" :key="item.code" :label="item.value" :value="item.code"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="计算时间范围" prop="timeSize">
					<el-select v-model="temp.timeSize" type="text" placeholder="请选择">
						<el-option v-for="item in timeSizes" :key="item.code" :label="item.value" :value="item.code"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上榜频度阈值" prop="threshold">
					<el-input v-model="temp.threshold" :maxlength='11' placeholder="请输入"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取消</el-button>
				<el-button type="primary" @click="updateUser">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { newWordList, wordUpdateStatus, deleteList, getSetList, getSetInfo, setUpdate } from '../../../api/word'
	import pinyin from 'pinyin'

	export default {
		name: 'newWordFound',
		created() {
			this.getList()
			this.getSelectList()
		},
		methods: {
			handleSelectionChange(val) {
				this.multipleSelection = val.map(e => e.id)
			},
			getList() {
				this.listLoading = true
				newWordList(this.listQuery).then(res => {
					this.listLoading = false
					this.tableData = res.Data
					this.total = parseInt(res.total)
				})
			},
			handleSizeChange(val) {
				this.listQuery.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
				this.getList()
			},
			getSelectList(){
				return new Promise((resolve, reject) => {
					getSetList().then(res => {
						let tar = res.Data[0] || []
						this.timeCycles = Object.assign([], tar.timeCycles)
						this.timeSizes = Object.assign([], tar.timeSize)
						resolve()
					}).catch(() => {
		          		reject('新词发现设置下拉数据获取失败')
		        	})
				})
			},
			handleCreate() {
				getSetInfo().then(res => {
					let tar = res.Data[0] || {}
					this.temp = Object.assign({}, tar)
					this.dialogFormVisible = true
					this.$nextTick(() => {
						this.$refs['temp'].clearValidate()
					})
				})
			},
			handleDeleteList() {
				if(this.multipleSelection.length === 0){
					this.$message({ type: 'warning', message: '请勾选需要添加至黑名单的数据' })
				 	return
				}
				this.$confirm('确认加入黑名单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteList({
						'batchIds': this.multipleSelection
					}).then(() => {
						this.getList()
						this.$notify({ title: '成功', message: '已添加至黑名单', type: 'success', duration: 2000 })
					})
				}).catch(() => {
					this.$message({ type: 'info', message: '已取消' })
				})
			},
			changeStatus(row, sta){
				let str = sta == 1 ? '词汇库' : '黑名单'
		        this.$confirm('确认加入' + str + ', 是否继续?', '提示', {
		          	confirmButtonText: '确定',
		          	cancelButtonText: '取消',
		          	type: 'warning'
		        }).then(() => {
					let obj = {
						'id': row.id,
						'wordName': row.wordName,
						'wordNum': row.wordNum,
						'dataStatus': sta
					}
					wordUpdateStatus(obj).then(res => {
			            this.$notify({ title: '成功', message: '添加成功', type: 'success', duration: 2000 })
			            this.getList()
					})
		        }).catch(() => {
		          	this.$message({ type: 'info', message: '已取消' })
		        })
			},
	      	updateUser(){
		        this.$refs['temp'].validate(valid => {
		          if (valid) {
		            setUpdate(this.temp).then(() => {
		              	this.getList()
		              	this.dialogFormVisible = false
		              	this.$notify({ title: '成功', message: "新词发现设置成功", type: 'success', duration: 5000 })
		            })
		          }
		        })
	      	},
			proving(e) {
				let keynum = window.event ? e.keyCode : e.which
				if(keynum == 189 || keynum == 190 || keynum == 110 || keynum == 109) {
					this.$message({ type: 'warning', message: '请输入正整数' })
					this.$set(e.target, 'value', '')
				}
			}
		},
		data() {
			let isInteger = (rule, value, callback) => {
				let reg = /^[+]{0,1}(\d+)$/g;
				if (!reg.test(value)) {
					callback(new Error('请输入正整数'))
				} else {
					callback()
				}
			}
			return {
				multipleSelection: [],
				total: null,
				listLoading: false,
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					dataStatus: 0,
					wordName:''
				},
				dialogFormVisible: false,
				tableData: [],
				timeCycles: [],
				timeSizes: [],
				temp: {},
        		tempRules:{
	         	 	threshold: [
  						{ required: true, validator: isInteger, trigger: 'blur' }
			      	]
        		}
			}
		}
	}
</script>